<template>
  <div class="overhaul">
    <el-form
      ref="elForm"
      :model="formData"
      :rules="rules"
      size="medium"
      label-width="110px"
    >
      <el-row :gutter="15">
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <el-form-item
                label="检修时间:"
                prop="area"
              >
                <el-date-picker
                  :style="{width: '100%'}"
                  v-model="formData.startendtime"
                  type="datetimerange"
                  placeholder="请输入检修时间"
                  align="right"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss "
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row :gutter="15">
            <el-col :span="24">
              <div class="overhaul-btn">
                <el-button
                  class="table-query"
                  type="primary"
                  @click="submitForm"
                >保存下发</el-button>
                <el-button
                  class="table-query"
                  type="primary"
                  @click="clsoe"
                >关闭取消</el-button>
              </div>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue ,Prop} from "vue-property-decorator";

@Component
export default class overhaul extends Vue {
  @Prop() tableSelect!:any
  formData = {
    startendtime: "", 
  };
  rules = {
    startendtime: [{ required: true, message: "请输入内容", trigger: "blur" }],
  };
  $refs!: {
    elForm: any;
  };
  //创建
  clsoe() {
    this.$emit("close");
  }
  submitForm() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) {
        this.$message({
          type: "warning",
          message: "表单校验不通过",
        });
        return;
      }
      // TODO 提交表单
      // console.log(this.formData.startendtime);
      
      if (this.formData.startendtime&&this.formData.startendtime.length>0 ) {
        this.tableSelect[0].JXKSSJ=this.formData.startendtime[0];
      this.tableSelect[0].JXJSSJ=this.formData.startendtime[1];
      }
      
      (this as any).$services
        .addOrUpdate({ data: this.tableSelect[0] ,method: "post"})
        .then((result: any) => {
          // console.log(result);
        })
        .catch((err: object) => {
          console.log(err);
        });
     
      this.$emit("inithandle");
    });
  }
}
</script>

<style lang="scss" scoped>
.overhaul {
  width: 100%;
  // height: 400px;
  &-btn {
    width: 100%;
    height: 0.5rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>

